<template>
    <div class="graduationInfo">
        <el-breadcrumb separator="/" class="breadcrumb-bottom">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>毕业设计</el-breadcrumb-item>
          <el-breadcrumb-item>毕设申请信息</el-breadcrumb-item>
        </el-breadcrumb>

        <div style="margin-bottom:50px">
            <h2 class="left_title">
              课题名称&nbsp;&nbsp;&nbsp;<span>{{ titleInfo.courseName}}</span>
            </h2>
            <h2 class="right_title">
              要求人数&nbsp;&nbsp;&nbsp;<span>{{ titleInfo.requireNum }}</span>
            </h2>
        </div>
        <div style="clear:both"></div>
        <el-button style="float: right" type="primary" @click="dialogTableVisible=true">增加学生</el-button>


      <el-table
        :data="studentTable"
        border
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="name"
          label="学生姓名"
          width="290">
        </el-table-column>
        <el-table-column
          prop="id"
          label="学号"
          width="290">
        </el-table-column>
        <el-table-column
          prop="class"
          label="班级"
          width="290">
        </el-table-column>
        <el-table-column
          label="操作">
          <template scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, studentData)"
              type="text"
              size="small">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="学生信息" v-model="dialogTableVisible">
        <el-table :data="studentData">
          <el-table-column property="name" label="学生姓名" width="150"></el-table-column>
          <el-table-column property="id" label="学号" width="200"></el-table-column>
          <el-table-column property="class" label="班级"></el-table-column>
          <el-table-column label="操作">
              <template scope="scope">
                <el-button @click="open">添加至课题</el-button>
              </template>
          </el-table-column>
        </el-table>
      </el-dialog>


      <div class="paging">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
      </div>
    </div>

</template>
<script>
  export default{
      name:'graduationInfo',
      data(){
         return {
             titleInfo:{
                 courseName:'教研室管理系统',
                 requireNum:20
             },
           studentTable: [{
             name: 'jerry',
             id:'201',
             class:'2',
           }, {
             name: 'jerry',
             id:'201',
             class:'2',
           }, {
             name: 'jerry',
             id:'201',
             class:'2',
           }, {
             name: 'jerry',
             id:'201',
             class:'2',
           }],
           multipleSelection: [],
           studentData:[
             {
                 name:'blue',
                 id:'201320020214',
                 class:'01',

             },
             {
               name:'blue',
               id:'201320020214',
               class:'01'
             }
           ],
           dialogTableVisible:false
         }
      },
      components:{

      },
      methods: {
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          this.currentPage = val;
          console.log(`当前页: ${val}`);
        },
        addStudent(){
//          this.$router.go('/#');
          this.$router.push({path:'/'})
        },
        open() {
          this.$message('添加成功');
        },
        deleteRow(index, rows) {
          rows.splice(index, 1);
        }

      }
  }
</script>
<style>
  .left_title{
    color:royalblue;
    float: left;
    margin-right:30px;
  }
  .right_title {
    color:royalblue;
    float: left
  }
  .left_title span,.right_title span{
    color:red
  }
</style>
